Skip to content

fix: keep header nav links ahead of utility icons in tab order#1199

Merged
bluebill1049 merged 2 commits intoreact-hook-form:masterfrom
hiromieguchi802-lab:fix/nav-focus-order
Mar 28, 2026
Merged

fix: keep header nav links ahead of utility icons in tab order#1199
bluebill1049 merged 2 commits intoreact-hook-form:masterfrom
hiromieguchi802-lab:fix/nav-focus-order

Conversation

@hiromieguchi802-lab
Copy link
Copy Markdown
Contributor

@hiromieguchi802-lab hiromieguchi802-lab commented Mar 24, 2026

Fixes #1182

Summary

  • move the primary navigation markup ahead of the search and social utility links in the DOM
  • keep the existing visual layout unchanged by relying on the current absolute positioning styles
  • preserve the existing nav/search/toggle behavior while improving keyboard focus order for header navigation

Verification

  • confirmed the issue points to src/components/Nav.tsx and that the header utility links were rendered before the main nav links in the DOM
  • confirmed this change is limited to reordering the existing Nav JSX blocks with no link or style logic changes
  • attempted local dependency installation to run site checks, but the workspace is still mid-install and the repo currently cannot run
    ext lint/ sc to completion in this environment yet

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 24, 2026

@hiromieguchi802-lab is attempting to deploy a commit to the BEEKAI OSS Team on Vercel.

A member of the Team first needs to authorize it.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 24, 2026 •
edited
Loading

✅ Deploy Preview for sage-cassata-31d224 ready!

Name Link
🔨 Latest commit a39a6c1
🔍 Latest deploy log https://app.netlify.com/projects/sage-cassata-31d224/deploys/69c722040e285b000881e5a1
😎 Deploy Preview https://deploy-preview-1199--sage-cassata-31d224.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@hiromieguchi802-lab
Copy link
Copy Markdown
Contributor Author

hiromieguchi802-lab commented Mar 24, 2026

Heads-up: this PR only reorders the existing header blocks in \src/components/Nav.tsx\ to put the primary nav before utility links in the DOM. I checked the failing format job and it is currently reporting \src/content/docs/useform.mdx, which is outside this change set. If you'd prefer, I can re-run or help narrow that down further.

@bluebill1049
Copy link
Copy Markdown
Member

bluebill1049 commented Mar 24, 2026

thanks! could you share a screenshot the diff?

@hiromieguchi802-lab
Copy link
Copy Markdown
Contributor Author

hiromieguchi802-lab commented Mar 27, 2026

Added the requested screenshot to make the tab-order change easier to review.

This PR only reorders the existing header blocks in src/components/Nav.tsx so the primary navigation links come before the utility icons in the DOM, while keeping the visual layout unchanged.

PR #1199 tab order diff

For context, the current format failure is still pointing to src/content/docs/useform.mdx, which is outside this PR's change set.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 28, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-hook-form-website Ready Ready Preview, Comment Mar 28, 2026 0:34am

Request Review

@bluebill1049 bluebill1049 merged commit 9ff66ac into react-hook-form:master Mar 28, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bluebill1049 bluebill1049 bluebill1049 approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

issue: [a11y] Header navigation has incorrect keyboard focus order (icons are focused before main nav items)

2 participants

@hiromieguchi802-lab @bluebill1049